<template >
<view class="container">
  <view class="collect-list">
        <div v-if='nothing'  class="nothing">
            <img src="/static/images/loading.png" alt="">
            <p>暂无数据</p>
            
        </div>
    <view class="item" @click="openGoods"  @touchstart="touchStart" @touchend="touchEnd"
      >
        <div v-for="(itemsList,list) in  items " :key="list" class="content">
          <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + itemsList.productId+'&img='+ itemsList.productThumbUrl">
                        <img class="left" :src="itemsList.productThumbUrl" >
                 
                    <div class="right">
                        <p>{{itemsList.productName}}</p>
                        <p>￥{{itemsList.price}}</p>
                      
                        
                    </div>
          </navigator>   
                </div>
    </view>
  </view>
</view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'

export default {
  data () {
    return {
      typeId: 0,
      collectList: [],
      items:[],
      page:'',
      loadingBt:false,
      nothing:false,
      vtitle:''
    }
  },
  onShow(){
    this.vtitle= this.$route.query.title 

        wx.setNavigationBarTitle({
              title:this.vtitle,
            }) 
           this.FollowProductList()
  },
  onUnload(){
    this.vtitle='';
    this.items=[];
    this.page=1
  },
  async mounted () {
    await Promise.all([
     
    ])
  },
   onReachBottom(){
    if(this.loadingBt){
       this.FollowProductList()
    }
  
  },
  methods: {
    // 获取我的收藏信息
  async  FollowProductList(){
     let res ;
     let data=JSON.stringify({ "pageIndex":this.page,"pageSize":"10"})
        if(this.vtitle=='收藏宝贝'){
          res = await api.FollowProductList({"data":data});
          console.log(1)
        }else if(this.vtitle=='足迹'){
          console.log(2)
          res = await api.FootProductList({"data":data});
        }
       
      
         
           this.items = this.items.concat(res.data);
           console.log(this.items)
                   if (res.data.length == 10) {
                        this.page++;
                        this.loadingBt=true;
                    }else{
                        this.loadingBt=false;
                    }
                    if(this.items==0){
                        this.nothing=true ;
                    }else{
                        this.nothing=false ;
                    }

    },
    
    // 长按删除，点击进入商品详情
    async openGoods (event) {
      let goodsId = this.collectList[event.currentTarget.dataset.index].value_id;
      // 触摸时间距离页面打开的毫秒数
      var touchTime = this.touch_end - this.touch_start;
      // console.log(touchTime);
      // 如果按下时间大于350为长按
        console.log(touchTime)
      if (touchTime > 350) {
        var that = this;
        wx.showModal({
          title: '',
          content: '取消收藏？',
          success: async function (res) {
            // console.log('确定取消收藏', res);
            if (res.confirm) {
              const res = await api.CollectAddOrDelete({ typeId: that.typeId, valueId: goodsId });
              if (res.errno === 0) {
                wx.showToast({
                  title: '删除成功',
                  icon: 'success',
                  duration: 2000
                });
                that.getCollectList();
              }
            }
          }
        })
      } else {
        wx.navigateTo({
          url: '../goods/goods?id=' + goodsId
        });
      }
    },
    // 按下事件开始
    touchStart (e) {
    
      this.touch_start = e.timeStamp;
    },
    // 按下事件结束
    touchEnd (e) {
      this.touch_end = e.timeStamp;
    }
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/ucenter/collect'
    }
  }
}
</script>

<style lang='scss' scoped>
page{
    background: #f4f4f4;
    min-height: 100%;
}
.nothing{
    p{
        font-size: 16px;
        text-align: center;
        line-height: 32px;
        margin-top: 35px;
    }
    img{
        display: block;
        height:142px;
        width: 142px;
        margin: 0 auto;
        margin-top: 80px;
    }
}
.container{
    background: #f4f4f4;
    min-height: 100%;
    background: #f7f7f7;
}

.collect-list{
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #f7f7f7;
 
  
}

 .content{
                margin-bottom: 15px;
                background: #fff;
                height: 100px;;
                padding-left: 4vw;
                position: relative;
                padding-top: 11px;
                .left{
                    float: left;
                    height: 79px;
                    width: 24vw; 
                }
                .right{
                    float: left;
                    margin-left: 15px;
                    width: 53vw;
                    p:nth-child(1){
                      margin-top: 2px;
                        color: rgba(51,51,51,1);
                        font-size: 14px;
                        line-height: 16px;
                        overflow: hidden;
                        height: 32px;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical; 

                    }
                     p:nth-child(2){
                        font-size: 14px;
                        padding-top:26px;
                        color: #FD6D1F;
                    }
                
                }
                .last{
                    position: absolute;
                    bottom:18px;
                    right: 10px;
                    text-indent: right;
                    display: block;
                    font-size: 12px;
                    span:nth-child(1){
                        display: block;
                        color: #333333;
                    };
                    span:nth-child(2){
                         display: block;
                         padding-top:5px;
                        text-decoration: line-through;
                        color: rgba(51,51,51,0.5);
                    }
                }
            }
</style>
